import { View, Input, Image} from '@tarojs/components'
import {useState} from 'react'
import './index.scss'

export default props => {
  const {placeholder,searchStyle, onChange} = props
  const [value, setValue] = useState()
  const startSearch = (e) => {
    onChange('title', e.detail.value)
    setValue('')
  }
  return (
    <View className="my-search">
      <Input 
        type="text" 
        placeholder={placeholder} 
        style={{backgroundColor:searchStyle.bgcolor}} 
        className="search" 
        autoFocus={true}
        onConfirm={startSearch}
        onInput={e => setValue(e.detail.value)}
        placeholderStyle={{color:searchStyle.color}}
        value={value}
      />
      <Image src={searchStyle.imgIcon} className="search-icon" />
    </View>
  )
}